<template>
  <view class="allContainer" :class="{ moveStyle: isMove,articleBgStyle:isArticleBg,videoBgStyle:isVideoBgStyle}">
    <image class="imgStyle" :src="positionPic" />
    <view class="centerBox">
      <view class="positionName">{{ positionName }}</view>
      <view class="morePositionInfo">关注后订阅更多职业资讯和高薪职位</view>
    </view>

    <view class="btn" @click="onClickCollect"> </view>
    
  </view>
</template>
 
  <script>
import {
  addToCollection,
  personCollectInfo,
  addMessageSubscribe,
} from "@/api/modules/career";
import ReportShareMixin from "@/mixins/reportShare";
 
export default {
  mixins: [ReportShareMixin],
  components: {
    
  },
  props: {
    info: {
      type: Object,
      default: function () {
        return {
          // 表示内容相关 2-职业大全
          relatedType: undefined,
          // 1-职讯 2-短视频
          type: 1,
          // 职业ID
          positionId: "",
        };
      },
    },
    // sharePersonId: {
    //   type: String,
    //   default: "",
    // },
    // shareChannel: {
    //   type: String,
    //   default: "3",
    // },
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || "",
      isMove: false,
      clickFollowPosition: "clickFollowPosition",
      openId: uni.getStorageSync("openid") || "",
      positionName: "职业名称",
      isLogin: 0, // 是否已经登陆
      isCollect: 0, // 是否已经收藏
      positionPic: "", // 头像
      relatedType: undefined,
      // 1-职讯 2-短视频
      type: 1,
      isArticleBg: true,
      isVideoBgStyle: false,
      // 职业ID
      positionId: "",
    };
  },
  mounted() {},

  created() {},

  onLoad(opt) {},

  watch: {
    info: {
      handler(val) {
        if (val.relatedType) {
          // console.log("watch", val);
          this.positionId = val.positionId;
          this.relatedType = val.relatedType;
          this.type = val.type;

          this.isArticleBg = this.type == 1;
          this.isVideoBgStyle = this.type == 2;
          this.positionName = val.positionName;
          this.isLogin = val.isLogin;
          this.isCollect = val.isCollect;
          this.positionPic = val.positionPic;
          var isClickFollowInPath = this.hasClickFollowInPath();

          if (this.isLogin) {
            if (isClickFollowInPath) {
              // 之前点击关注但是未登陆，调到登陆页面登陆成功后返回
              //this.reqAddFollow();
              this.subscribeMessage();
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // // 获取用户关注的信息
    // reqPersonCollectInfo() {
    //   const params = {
    //     positionId: this.positionId,
    //     personId: this.getPersonId(),
    //   };
    //   personCollectInfo(params).then((res) => {
    //     if (res.code == 200 && res.data) {
    //       this.positionName = res.data.positionName;
    //       this.isLogin = res.data.isLogin;
    //       this.isCollect = res.data.isCollect;
    //       this.positionPic = res.data.positionPic;
    //       var isClickFollowInPath = this.hasClickFollowInPath();

    //       if (this.isLogin) {
    //         if (isClickFollowInPath) {
    //           // 之前点击关注但是未登陆，调到登陆页面登陆成功后返回
    //           this.subscribeMessage();
    //         }
    //       }
    //     } else {
    //     }
    //   });
    // },

    // // 记录消息订阅
    // reqAddMessageSubscribe() {
    //   const params = {
    //     dataId: this.positionId,
    //     personId: this.getPersonId(),
    //     openId: this.openId,
    //     //pushType 推送类型 10：报告  20：案例 30 ：职讯  40 ：短视频
    //     pushType:  30  ,
    //   };
    //   addMessageSubscribe(params).then((res) => {
    //     console.log("reqAddMessageSubscribe", res);
    //   });
    // },
    // 判断是否是点击了关注按钮后跳转到这个页面的
    hasClickFollowInPath() {
      var fullPath =
        getCurrentPages()[getCurrentPages().length - 1].$page.fullPath;

      // console.log("onClickCollect fullPath mounted", fullPath);
      let paramStr = fullPath.split("?");
      var resObj = {};
      if (paramStr[1]) {
        paramStr[1].split("&") &&
          paramStr[1].split("&").forEach((item) => {
            resObj[item.split("=")[0]] = item.split("=")[1];
          });
      }
      if (resObj.hasOwnProperty("" + this.clickFollowPosition)) {
        return true;
      }
      return false;
    },

    getPersonId(){
      var personId = uni.getStorageSync("person-id").slice(2) || "";
      return personId;
    },

    checkLogin() {
      if (this.getPersonId() && this.getPersonId() != "") return true; 
      //this.$refs.loginDialog.setVisibility(true); 
      this.$emit("showLoginDialog");
      return false;
    },

    // 点击收藏
    onClickCollect() {
      if (this.checkLogin()) {
        this.subscribeMessage();
      }
    },

    // 隐藏动画
    endAnimation() {
      setTimeout(() => {
        setTimeout(() => {
          this.$emit("setPositionFollowBoxVisiable", false);
        }, 300);
        this.isMove = true;
      }, 1000);
    },

    // 点击关注职业
    reqAddFollow() {
      console.log();
      const params = {
        positionId: this.positionId,
        personId: this.getPersonId(),
        fromType: getApp().globalData.shareFrom,
      };
      addToCollection(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "关注成功",
          });
          // console.log('sharePersonId-----------', this.sharePersonId);
          this.reportPositionCollect();
          this.endAnimation();
          this.$emit("addToCollectionSuccess", false);
        } else {
          console.log("收藏失败", res);
        }
      });
    },

    // 订阅 通知
    subscribeMessage() {
      var ids = "meN3arXkcBxBpGRG81narVRMmqU-jA5i-IXRcs0fPb4";
      uni.requestSubscribeMessage({
        tmplIds: [ids],
        complete: (res) => {
          console.log("requestSubscribeMessage complete", res);
          //console.log('requestSubscribeMessage ids',res[''+ ids +'']);
          var value = res["" + ids + ""];
          if (value == "accept") {
            console.log("requestSubscribeMessage value", "accept");
            // 接受了
          } else if (value == "reject") {
            console.log("requestSubscribeMessage value", "reject");
            // 拒绝了
          }
          if (this.getPersonId() && this.getPersonId() != "") {
            this.reqAddFollow();
          } else {
            this.checkLogin();
          }
        },
      });
    },
    
  },
};
</script>
  
  <style lang="scss" scoped>
.moveStyle {
  animation-name: move;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
}

@keyframes move {
  0% {
    opacity: 1;
    transform: translateY(0rpx);
  }
  100% {
    opacity: 0;
    transform: translateY(-60rpx);
  }
}

.videoBgStyle {
  background: #ffffff;
}
.articleBgStyle {
  background: #efefef;
}

.allContainer {
  // background: #EFEFEF;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100vw;
  height: 112rpx;
  .imgStyle {
    width: 66rpx;
    height: 66rpx;
    margin-left: 32rpx;
    border-radius: 50%;
  }

  .centerBox {
    margin-left: 10rpx;
    flex: 1;
    .positionName {
      color: #222222;
      font-size: 28rpx;
      font-weight: bolder;
    }

    .morePositionInfo {
      color: #888888;
      font-size: 26rpx;
      margin-top: 8rpx;
    }
  }
}

.btn {
  height: 64rpx;
  width: 140rpx;

  background-size: 100% 100%;
  background-image: url($img-base + "career/icon_position_follow_btn.png");
  background-repeat: no-repeat;

  z-index: 9999;
  margin-right: 32rpx;
}
.aloha {
  background: #f75a3e;
}
</style>